<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 	<meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="icon" href="#">
	<script>
        !function(e,t,i,r){function n(){var e=document.querySelector("head"),t=document.createElement("div");t.style.width="1rem",t.style.display="none",e.appendChild(t);var i=parseFloat(window.getComputedStyle(t,null).width);return e.removeChild(t),i}function a(){var r=d.getBoundingClientRect().width;r/c>768&&(r=768*c);var n=r/e*t;if(!i){var a=p/16;n/=a}d.style.fontSize=n+"px",v.rem=n}var m,o=window,l=o.document,d=l.documentElement,s=l.querySelector('meta[name="viewport"]'),c=0,u=0,p=n(),v={};if(s){var h=s.getAttribute("content").match(/initial\-scale=([\d\.]+)/);h&&(console.warn("将根据已有的meta标签来设置缩放比例"),u=parseFloat(h[1]),c=parseInt(1/u))}if(!c&&!u){var f=o.devicePixelRatio;r?(c=f>=3&&(!c||c>=3)?3:f>=2&&(!c||c>=2)?2:1,u=1/c):(c=1,u=1/c)}if(d.setAttribute("data-dpr",c),!s)if(s=l.createElement("meta"),s.setAttribute("name","viewport"),s.setAttribute("content","width=device-width, initial-scale="+u+", maximum-scale="+u+", minimum-scale="+u+", user-scalable=no"),d.firstElementChild)d.firstElementChild.appendChild(s);else{var w=l.createElement("div");w.appendChild(s),l.write(w.innerHTML)}o.addEventListener("resize",function(){clearTimeout(m),m=setTimeout(a,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(m),m=setTimeout(a,300))},!1),a(),v.dpr=c,v.refreshRem=a,v.rem2px=function(e){var t=parseFloat(e)*this.rem;return"string"==typeof e&&e.match(/rem$/)&&(t+="px"),t},v.px2rem=function(e){var t=parseFloat(e)/this.rem;return"string"==typeof e&&e.match(/px$/)&&(t+="rem"),t},window.remmoka=v}
        (750,100,!0,!0);
        /*
         * designWidth, oneRem2Px, resetScaleFontSizeToDefault, useScaleFix1pxTooBold
         * @param designWidth 设计稿宽度 一般来说iPhone6是750 如果缩小就变成了375px
         * @param oneRem2Px 1rem对应多少px
         * @param resetScaleFontSizeToDefault 是否重置Android因为系统放大或者缩小字体带来的影响
         * @param useScaleFix1pxTooBold 是否通过meta标签的scale处理1px过于粗的问题
         * */
    </script>
	<title>商品详情</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="goods">
	<header class="goods-header">
		<img src="img/goods/winePicture.png" style="width:100%;height:6.8rem">
	</header><!-- /header -->
	<section class="goods-section">
		<div class="goods-brief">
			奔富 （Penfolds） 红酒 葡萄酒 澳大利亚进口BIN389红 葡萄酒 750ml
		</div>
		<div class="goods-price">￥549.00</div>
		<div class="goods-infor">
			<div class="fast-mail">快递：免费</div>
			<div class="sales-volume">月销<span>2</span>笔</div>
		</div>
		<div class="check-number">
			<div class="number">选择数量</div>
			<div class="check"><img src="img/goods/arrow.png" style="width:0.rem;height:0.3rem">
			</div>
		</div>
		<div class="product-parameter">
			<div class="parameter">产品参数</div>
			<div class="check"><img src="img/goods/arrow.png" style="width:0.25rem;height:0.3rem">
			</div>
		</div>
		<div class="remark-on">
			<div class="remark">
				<img src="img/goods/pen.png" style="width:0.35rem;height:0.35rem">
				<span>点评</span>
			</div>
			<div class="check"><img src="img/goods/arrow.png" style="width:0.25rem;height:0.3rem">
			</div>
		</div>

	</section>
	<div class="goods-footer">
		<ul class="footer-list">
            <li>
                <img src="img/goods/custom.png" style="width:0.55rem;height:0.55rem">
            	<span>客服</span>
            </li>
            <li>
                <img src="img/goods/grade.png" style="width:0.55rem;height:0.55rem">
            	<span>评分</span>
            </li>
            <li>
                <img src="img/goods/cart.png" style="width:0.55rem;height:0.55rem">
            	<span>购物车</span>
            </li>
            </li>
        </ul>
	</div>
	<div class="pop-up">
		<div class="liitle">
			<div class="picture">
				<img src="img/goods/littlePictrue.png" style="width:2.2rem;height:2rem">
			</div>
			<div class="choice">
				<p class="price">￥549.00</p>
				<p class="overplus">库存<span>199</span>件</p>
				<p class="number">请选择数量</p>
			</div>
			<div class="error">
				<img src="img/goods/error.png" style="width:0.4rem;height:0.4rem">
			</div>
		</div>
		<div class="goods-number">
			<div class="title">数量：</div>
			<div class="minus">-</div>
			<span>1</span>
			<div class="add">+</div>
		</div>
		<div class="confirm">
			<a href="shopping_cart.html" title="">加入购物车</a>
		</div>
	</div>
	<script type="text/javascript" src="js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="js/goods.js"></script>
</body>
</html>
